<template>
  <Treeselect
    style="width: 200px"
    v-bind="$attrs"
    v-on="$listeners"
    noResultsText="无数据"
    :multiple="false"
    v-model="departmentId"
    :options="selectOptions"
  />
</template>
<script>
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: "BaseVueTree",
  components: { Treeselect },
  props: {
    request: {
      type: Function
    },
    handleOptions: {
      type: Function
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(options) {
        this.selectOptions = options
      }
    }
  },
  data() {
    return {
      selectOptions: [],
      departmentId: null
    }
  },
  methods: {
    async getSelectOptions(value, isInit) {
      if (!this.request) {
        return
      }
      let { data = [] } = await this.request(value)

      if (this.handleOptions) {
        data = this.handleOptions(data)
      }
      this.selectOptions = data
    }
  },
  created() {
    this.getSelectOptions(null, true)
  }
}
</script>
<style scoped>
</style>
